<template>
<div style="height:100%">
  
  <x-header :left-options="{backText: ''}" class="ret">
      <div class="retTitle">我的优惠券</div> 
  </x-header>

<div class="main">

  <tab :line-width=4  v-model="tabindex">
      <tab-item class="vux-center"  
      :selected="tabname === item" v-for="(item, tabindex) in tablist" 
      @click="tabname = item" :key="tabindex" @on-item-click="create">{{item}}</tab-item>
  </tab>

  <!-- <swiper v-model="tabindex" height="600px" :show-dots="false">  -->
    <!-- <swiper-item v-for="(item, tabindex) in tablist" :key="tabindex">  -->

      <div class="cart-text">
          <div v-if="Vouchers!=null" v-for="(info,index) in Vouchers" :key="index" >
            <group title="" class="wrap" v-if="info.isPay!=1">
              <div class="text">
                <div class="card" :style={backgroundColor:info.voucherInfo.bgColor}>
                  <div class="cart-info">
                    <p class="zk-title">{{info.voucherInfo.mingc}}</p>
                    <p class="zk-desc">{{info.voucherInfo.beiz}}</p>
                    <p class="zk-desc">有效日期：{{info.kaisrqShiy |formatDate}}~{{info.jiesrqShiy | formatDate}}</p>
                    <x-button class="zk-btn"  mini 
                      @click.native="showVoucher(info.id)" v-show="info.shiybz == 0 && info.jiesrqShiy >= ckTime">{{ btnInfo }}</x-button>
                    <img :src="ysxImgUrl" class="zk-sximg" v-show="(info.jiesrqShiy < ckTime) && info.shiybz != 1 ? true : false"/>
                    <img :src="ysyImgUrl" class="zk-sximg" v-show="(info.shiybz == 1) ? true : false"/>
                  </div>
                </div>
              </div> 
            </group>
          </div>
      </div> 

    <!-- </swiper-item> -->
  <!-- </swiper> -->
  </div>
</div>
</template>


<script>
import { sign, signStr } from "@/assets/js/sign.js";
import { formatDate } from "@/assets/js/utils.js";
import { XHeader,Group,XButton, Tab, TabItem,Swiper, SwiperItem, TransferDomDirective as TransferDom } from "vux";
export default {
  directives: { TransferDom },
  components: { XHeader,Group,XButton, Tab, TabItem,Swiper, SwiperItem },
  data() {
    return {
      tabindex: 1,
      tabkey: 0,
      tablist: ['全部', '未使用', '已使用', '失效'],
      tabname: '未使用',
      Vouchers: null, //优惠券列表
      cartopen: true,
      btnInfo: '使用',
      sybz: 0,  //使用标志 0未使用 1已使用 2失效 3全部
      ysxImgUrl: require("@/assets/img/已失效.png"), //已失效图标
      ysyImgUrl: require("@/assets/img/已使用.png"), //已使用图标
      isShowysx: false, //是否显示已失效图标 
      ckTime: null, //当前是否过期验证时间
    
    }
  },
  created() {
    let ct = new Date(); 
    this.ckTime = (new Date(ct.getFullYear() + "-" + (ct.getMonth()+1) + "-" + ct.getDate() + ' 00:00:00')).getTime()

    this.create()
   },
  methods: {
    create(){
      let tabindex = this.tabindex;
      let sybz = this.sybz; 
      sybz = tabindex == 0 ? 3 : (tabindex == 1 ? 0 : (tabindex == 2 ? 1 : (tabindex == 3 ? 2 : 0)))
      this.sybz = sybz;
      // console.log("sybz: "+sybz + "   tabindex: "+tabindex)  

      let sjid = this.$route.params.sjid;
      let pthyid = this.$route.params.pthyid;
      
      // console.log("pthyid: "+pthyid+"    sjid: "+sjid)
      let urlparam = signStr("/v1/api/voucher/getHySjVoucherList");  
      this.$http.get("voucher/getHySjVoucherList?pthyid=" + 
        pthyid+"&sjid="+sjid+"&sybz="+sybz+"&"+urlparam).then(ret => {
        if (ret.status == 200) {

          var _data = ret.data.resultObject;
          var _code = ret.data.code || ret.data.result.code;
          var _msg = ret.data.msg || ret.data.result.msg;
          
          if (_code == 1) {  
            this.Vouchers = _data;

            if(sybz == 2){
              this.isShowysx = true;
            }else{
              this.isShowysx = false;
            }
            
          }else{
            this.Vouchers = null;
            this.$vux.toast.show({ type: "cancel",text: _msg }); 
          } 
        }
      })
    },
    //显示优惠券信息 二维码
    showVoucher(id){
      // let sjid = this.$route.params.sjid;
      // let pthyid = this.$route.params.pthyid;
      
      this.$router.push('/UseVoucher/'+id);
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy.MM.dd");
    },
    formatTime(time) {
      var arr = time.split(":");
      return arr[0] + ":" + arr[1];
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    // "$route": "created",
    /*
    $route(to, from) {
        if(to.name == "MyVoucher"){
          // console.log("TO: "+to.name);
          // console.log("FROM: "+from.name);
          this.create();
        }
			}
*/
  }
}
</script>


<style lang="sass">
@import "~@/assets/scss/mixin.scss";

.seller
  width: 100%
  background-color: #fff
  overflow: hidden
  .overview
    position: relative
    padding: 18px
    .collect
      // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      // padding-bottom: 18px 
      .sname
        font-size: 20px
        font-weight: 700
        line-height: 14px
        margin-bottom: 15px
      .star-wrapper
        display: inline-block
        margin-right: 12px
        .star
          display: inline-block
        .ratingCount
          display: inline-block
          font-size: 14px
          color: rgb(7, 17, 27)
          line-height: 14px
      .sellCount
        display: inline-block
        font-size: 10px
        color: rgb(7, 17, 27)
        line-height: 10px
      .selldesc
        font-size: 14px
        color: rgb(7, 17, 27)
        line-height: 22px
      .beizAll
        width: 100%
        font-size: 14px
        line-height: 22px
      .beiz
        width: 100%
        font-size: 14px
        line-height: 22px
        display: -webkit-box !important
        -ms-text-overflow: ellipsis
        text-overflow:ellipsis
        overflow: hidden
        -webkit-box-orient: vertical
        -webkit-line-clamp: 3
      .btn
        font-size: 12px
        line-height: 22px
        color: #13d1be
      .collect-icon
        display: inline-block
        position: absolute
        top: 18px
        right: 18px
        text-align: center
        .icon-favorite
          display: inline-block
          color: #d4d6d9
          font-size: 24px
          margin-left: 5px
          margin-bottom: 8px
          &.active
            color: rgb(240, 20, 20)
        .text
          font-size: 10px
          line-height: 10px
          color: rgb(77, 85, 93)
    .param
      padding-top: 18px
      display: flex
      .left, .mid, .right
        display: inline-block
        flex: 1
        text-align: center
        border-right: 1px solid rgba(7, 17, 27, 0.1)
        .text
          display: block
          margin-top: 18px
          margin-bottom: 4px
          color: rgb(147, 153, 159)
          font-size: 10px
          line-height: 10px
        .price
          font-size: 10px
          color: rgb(7, 17, 27)
          line-height: 24px
          margin-bottom: 18px
          .num
            font-size: 24px
      .right
        border-right: none;
  .cart-text
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .text
      padding: 8px 0 0 12px
      color: rgb(240, 20, 20)
      padding-bottom: 16px
      // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    .btn
      text-align: center
      width: 100%
      font-size 8px
      color: #13d1be
  .notice
    padding: 18px 18px 0 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .text
      padding: 8px 0 0 12px
      font-size: 14px
      line-height: 24px
      padding-bottom: 16px
      border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      li
        font-size: 14px
        line-height: 16px
        color: rgb(7, 17, 27)
        padding: 16px 12px
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    .support
      padding: 16px 12px
      border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      &:last-child
        border: none
      .icon
        display: inline-block;
        width: 18px
        height: 18px
        margin-right: 4px
        background-size: 18px 18px
        background-repeat: no-repeat
        vertical-align: top
        
      .description
        font-size: 12px
        line-height: 16px
        color: rgb(7, 17, 27)
  .photo
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .pic-wrapper
      width: 100%
      overflow: hidden
      // 图片不换行
      white-space: nowrap
      .pic-list
        font-size: 0
        .pic-item
          display: inline-block
          margin-right: 6px
          width: 120px
          height: 90px
          &:last:child
            margin-right: 0
          img
            width: 120px
            height: 90px
            border-radius: 3px
  .cpinfo
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .pic-wrapper
      width: 100%
      overflow: hidden
      // 图片不换行
      white-space: nowrap
      .pic-list
        font-size: 12px
        .pic-item
          display: inline-block
          margin-right: 6px
          width: 120px
          height: 90px
          &:last:child
            margin-right: 0
          img
            width: 120px
            height: 90px
            border-radius: 3px
          p
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
            text-align: center
          
  .info
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .text
      margin-top: 18px
      margin-bottom: 4px
      font-size: 14px
      line-height: 18px
    .item
      font-size: 12px
      line-height: 12px
      color: rgb(7, 17, 27)
      padding: 4px 16px
      // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      &:last-child
        // border-bottom: 0px solid rgba(7, 17, 27, 0.1) 
</style>

<style scoped lang="less">
.main {

  margin-top: 40px;
}
.card {
  /* 相对定位，方便让before和after伪元素绝对定位偏移 */
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #ffdd1d;

  .cart-info {
    .zk-title {
      padding-left: 16px;
      width: 100%;
      color: #fff;
      font-size: 20px;
      text-align: left;
    }
    .zk-desc {
      padding-left: 16px;
      width: 100%;
      padding-top: 10px;
      color: #fff;
      font-size: 12px;
      text-align: left;
    }
    .zk-btn {
      position: absolute;
      margin-right: 10px;
      right: 0;
      top: 30%;
      background-color: #ffa500;
      color: #fff;
      font-size: 16px;
      text-align: left;
      font-weight: 700;
    }
    .zk-sximg{
      position: absolute;
      margin-right: 10px;
      right: 0;
      top: 10%;
      height: 100px;
      // background-color: #ffa500;
      color: #fff;
      font-size: 16px;
      text-align: left;
      font-weight: 700;
    }
  }
  
}

.wrap {
  padding: 0 1rem;
  margin-top: 2rem;
}
// .card:before,
// .card:after {
//   content: " ";
//   height: 100%;
//   /* 绝对定位进行偏移 */
//   position: absolute;
//   top: 0;
// }

// .card:before {
//   /* 圆点型的border */
//   border-right: 8px dotted white;
//   /* 偏移一个半径，让圆点的一半覆盖div */
//   left: -4px;
// }

// .card:after {
//   /* 圆点型的border */
//   border-left: 8px dotted #fff;
//   /* 偏移一个半径，让圆点的一半覆盖div */
//   right: -4px;
// }

.ret {
    position: fixed;
  top: 0;
  width: 100%;
  height: 40px;
  z-index: 9999999;
  background-color: #fff;
 }
 .retTitle{
     color: #000;
     font-size: 14px;
 } 
 
div.rightTop{
  position:absolute;
  right:0;
  top:0;
  padding: 0 1rem;
  margin-top: 1rem;
}
div.divloading{
  // width:400px;  
  height:50px;  
  // border:1px solid #666;  
  overflow:hidden;  
  position:relative;  
  display:table-cell;  
  text-align:center;  
  vertical-align:middle;  
}
</style>